
// function plugin
(function( $ ){

  $.fn.abas = function( options ) {  

    var configuraAbas = $.extend( {
      'aba'      : 'details',
      'titulo'   : 'summary',
      'conteudo' : 'aside',
      'direcao'  : 'left'
    }, options);


    var abas = this;

    // ajusta aba
    abas.ajusta_conteudo = function(conteudo_aba) {
      var largura_conteudo = abas.innerWidth() - (conteudo_aba.outerWidth(true) - conteudo_aba.width());
      conteudo_aba.css('width',largura_conteudo);
    };

    // funcao para ativar qualquer aba
    abas.ativa_aba = function(aba) {

      // elemento "abas" - pai da aba solicitada para ativar (section.abas ou ul.abas)
      // var abas = aba.parent(configuraAbas.abas);
    
      // altura do titulo aba solicitada
      var altura_aba = $(configuraAbas.titulo, aba).outerHeight(true);
    
      // reseta todas abas dentro do elemento "abas"
      $(configuraAbas.aba, abas).css('height','auto').removeAttr('class').removeAttr('open');; // remove altura e class
      $(configuraAbas.aba + ' ' + configuraAbas.conteudo, abas).hide().css('width','auto'); // esconde conteudo e tira largura (aside ou div.detalhes)
      // fim reset
    
      // coloca class "ativo" na aba solicitada para ativar (details ou li) - attr open html5
      aba.addClass('ativo').attr('open','open');
    
      // mostra aba ativa
      $(configuraAbas.conteudo, aba).show();

      // define a largura do elemento "aba" (details ou li)
      abas.ajusta_conteudo($(configuraAbas.conteudo, aba));
      /*
      var largura_conteudo = abas.innerWidth() - ($(configuraAbas.conteudo, aba).outerWidth(true) - $(configuraAbas.conteudo, aba).width());
      $(configuraAbas.conteudo, aba).css('width',largura_conteudo);
      */

      // coloca na variavel a altura da aba ativa
      var altura_conteudo_ativo = $(configuraAbas.conteudo, aba).outerHeight(true);
    
      // coloca no elemento "aba" (details ou li) a altura do conteudo (aside ou div.detalhes) mais altura do titulo (summary ou h4)
      aba.css('height', altura_conteudo_ativo + altura_aba);
    
      // tambem coloca no elemento "abas" (section.abas ou ul.abas) a altura do conteudo (aside ou div.detalhes) mais altura do titulo (summary ou h4)
      abas.css('height', altura_conteudo_ativo + altura_aba);

    };

    // formata como abas todos elementos "abas" (section.abas ou ul.abas)
    return this.each(function() {        

      var hash, url = false; // hash para controlar ancora e url para manipular a url do navegador
      var aba = configuraAbas.aba; // (details ou li)
      var titulo = configuraAbas.aba + ' > ' + configuraAbas.titulo; // (summary ou h4)
      var conteudo = configuraAbas.aba + ' > ' + configuraAbas.conteudo; // (aside ou div.detalhes)
      var direcao = configuraAbas.direcao; // float: left ou right


      // inicio - cria abas

      // coloca position relative elemento "abas" (section.abas ou ul.abas)
      $(this).css('position', 'relative');

      // esconde todo conteudo (aside ou div.detalhes) das abas
      $(conteudo, $(this)).css({'position' : 'absolute', 'left' : 0});

      // coloca float nas abas (details ou li)
      $(aba, $(this)).css('float', direcao);

      // fim - cria abas


      // verificacoes para ativar aba caso tenha alguma ancora
      if (url = location.hash) {
        // pega o id da ancora
        url = url.replace(/#(.+?)/g, "$1");
        $(aba, $(this)).each(function() {
          // verifica se existe aba igual ancora
          if ($(this).attr('id') == url) {
            // chama funcao para ativar aba da ancora
            abas.ativa_aba($(this));
            // muda o status da variavel para informar que existe aba com id igual o da ancora
            hash = true;
          }
        });
      }
      // fim verificacao aba ativa


      // se nao existir ancora na url igual algum id de alguma aba
      if (!hash) {
        switch (direcao) {
          case 'left':
            // ativa a primeira aba
            abas.ativa_aba($(aba+':first', $(this)));
            break;
          case 'right':
            // ativa a ultima aba
            abas.ativa_aba($(aba+':last', $(this)));
            break;
        }
      }
      // fim ativacao 1a aba


      // ao clicar no link dentro do titulo (summary ou h4)
      $(configuraAbas.aba + ' ' + configuraAbas.titulo + ' a', $(this)).click(function() {

        // chama a funcao para ativar a "aba" (details ou li) e passa como paramentro o elemento "aba" pai (details ou li)
        abas.ativa_aba($(this).parent(configuraAbas.titulo).parent(configuraAbas.aba));

        return false;
      });


      $(window).resize(function() {

        $(configuraAbas.aba + '.ativo ' + configuraAbas.conteudo).each(function() {
          abas.ajusta_conteudo($(this));
        });

      });

    });

  };
})( jQuery );
